<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日历选择器</title>
    <style>
        * {
            box-sizing: border-box;
        }
        #date-picker.date {
            position: absolute;
            width: 320px;
            height: 300px;
            z-index: 999999;
            background: #fff;
        }
        .date-title,
        .date-table {
            width: 100%;
        }
        .date-title {
            overflow: hidden;
            height: 30px;
            padding: 0 20px;
            background: #e22f17;
            color: #fff;
            font-weight: 700;
            font-size: 16px;
            line-height: 30px;
        }
        .date-title>span {
            float: left;
        }
        .date-title > span:first-child {
            width: 20%;
        }
        .date-title > span:last-child {
            width: 20%;
        }
        .date-title > span:first-child+span {
            width: 60%;
            text-align: center;
        }
        .date-title > .date-title__next {
            text-align: right;

        }
        .date-title__next,
        .date-title__prev {
            cursor: pointer;
        }
        .date-table {
            padding: 10px;
            height: 270px;
            border: 1px solid #e2e2e2;
            text-align: center;
        }
        .date-table td {
            padding: 5px;
        }
        thead {
            /*color: #fff;*/
            /*background: #e2282d;*/
        }
        .date-table tr>td:first-child,
        .date-table tr>td:last-child  {
            color: #e22f17;
        }
        td.date-today {
            color: #fff!important;
            background: #e22f17;
        }
        .dn {
            display: none;
        }
        .date__choose-date>table {
            border: 1px solid #e2e2e2;
        }
        .date__choose-date>table,
        .date__choose-date>tbody
        {
            width: 320px;
        }
        .date__choose-date>tr {
            width: 100%
        }
        .date__choose-date td {
            padding: 24px 0;
            width: 25%;
            color: #333;
            text-align: center;
        }
        .date__choose-date td:hover {
            background:  #e22f17;
            color: #fff;
        }
        .thisDate__year,
        .thisDate__month {
            cursor: pointer;
        }
        .disabled {
            pointer-events: none;
            color: #f9f9f9;
        }
        tbody td {
            cursor: pointer;
        }
    </style>
</head>
<body>
<input type="text" value="" id="dateBox">
</body>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/date-picker.js"></script>
<script>
    $('#dateBox').datePick()
</script>
</html>